<template>
	<div>
		<div class="banner">
			<div class="imgs">
				<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item v-for="(item, index) in banners" :key="index">
						<img :src="item.pic" alt="" />
					</van-swipe-item>
				</van-swipe>
			</div>
		</div>
		<div class="remLists">
			<div class="title">
				推荐
			</div>
			<div class="content">
				<ul class="clearfix">
					<li v-for="(item, index) in personalized" :key="index" @click="goMusiclist(item.id)">
						<img :src="item.picUrl" alt="" />
						<span class="remd_lnum">{{ item.playCount | playCountA }}</span>
						<p>{{ item.name }}</p>
					</li>
				</ul>
			</div>
			<div class="up_date">
				<div class="navsomg">
					<h2>最新在线音乐</h2>
				</div>
				<div>
					<ul>
						<li class="" v-for="(item, index) in latestmusic" :key="index">
							<div class="left ">
								<div class="img">
									<img :src="item.picUrl" alt="" srcset="">
								</div>
								<div>
									<p>{{ item.name }}</p>
									<p><img src="" alt="" srcset="" />{{ item.song.artists[0].name }}</p>
								</div>
							</div>
							<div class="rigth " ref="button" @click="playmusic(item.id, item.name)">
								<span>在线点击播放</span>
								<span class="iconfont icon-04"></span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<br />
		<br />
	</div>
</template>

<script>
import { getBanner, getPersonalized, latestMusic } from '../api/recommend';
export default {
	data() {
		return {
			banners: '',
			personalized: '',
			latestmusic: [],
		};
	},
	methods: {
		getBannerFun() {
			// 请求数据
			getBanner().then((data) => {
				if (data.code == 200) {
					this.banners = data.banners;
				}
			});
		},
		getPersonalizedFun() {
			// 请求数据
			getPersonalized({ limit: 9 }).then((data) => {
				this.personalized = data.result;
			});
		},
		latestMusicFun() {
			// 请求数据
			latestMusic({ limit: 30 }).then((data) => {
				this.latestmusic = data.result;
			});
		},
		goMusiclist(id) {
			console.log(id);
			this.$router.push({
				path: '/recommend/musiclist',
				query: { id },
			});
		},
		playmusic(id, name) {
			let playMusicData = {
				coverImgUrl: this.latestmusic.picUrl,
				id,
				name,
				tracks: this.latestmusic,
			};
			// 数据存存储
			this.$store.commit("musicDatafun",playMusicData);
		},
	},
	created() {
		this.getBannerFun();
		this.getPersonalizedFun();
		this.latestMusicFun();
	},
	filters: {
		playCountA(value) {
			let w = value > 10000 ? value / 10000 : value; // 万计算
			let y = w > 10000 ? parseInt(w / 10000) + '亿' : parseInt(w) + '万'; //亿计算
			return y;
		},
	},
};
</script>

<style lang="less">
.banner {
	height: 228px;
	background-color: #A4D3EE;
	width: 100%;
	position: relative;
	// margin-bottom: 55px;
	.imgs {
		min-height: 228px;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 0px;
		margin: auto;
		width: 96%;
		background-color: #A4D3EE;
		border-radius: 5px;
		img {
			width: 100%;
		}
	}
}
.remLists {
	.title {
		font-size: 0.34375rem;
		height: 100px;
		line-height: 100px;
		font-weight: bold;
		text-indent: 0.5em;
	}
	.content li {
		width: 33.33%;
		float: left;
		position: relative;
		margin-bottom: 16px;
		img {
			display: block;
			width: 3.125rem;
			height: 3.125rem;
			margin: 0 auto;
			border-radius: 3px;
		}
		p {
			font-size: 0.28125rem;
			color: #2f3035;
			height: 0.78125rem;
			overflow: hidden;
			line-height: 0.4375rem;
			padding: 0.15625rem 0.109375rem;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.remd_lnum {
			position: absolute;
			top: 0px;
			right: 20px;
			font-size: 0.234375rem;
			color: #fff;
		}
	}
	.up_date {
		padding: 0 20px;
		> p {
			font-weight: bold;
		}
		ul {
			width: 100%;
			padding-top: 25px;
			li {
				width: 100%;
				height: 60px;
				margin: 15px 0;
				border-bottom: 1px solid #ccc;
				display: flex;
				.left {
					flex: 0.6px;
					display: flex;
					.img{
						width: 50px;
						height: 50px;
						margin-right: 30px;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
				.left p:nth-child(1) {
					font-size: 0.3125rem;
				}
				.left p:nth-child(2) {
					font-size: 0.15625rem;
					color: #666;
				}
				.rigth {
					cursor: pointer;
					flex: 0.3;
					line-height: 50px;
					font-size: 16px;
					&:hover {
						color: #d4473c;
						.iconfont {
							color: #d4473c;
						}
					}
					.iconfont {
						font-size: 20px;
						color: #666;
					}
				}
			}
		}
	}
}
</style>
